@media screen and (min-width: 911px) {
    .CommentsMasked-none {
        z-index: 500;
        background-color: rgba(0,0,0,0);
        position: fixed;
        right: 0;
        top: 60px;
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
    }

    .CommentsMasked-show {
        z-index: 500;
        background-color: rgba(0,0,0,0);
        position: fixed;
        right: 0;
        top: 60px;
        max-height: 100%;
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        transition: max-height 0.5s ease-in-out;
    }

    .CommentsMasked-covers {
        flex: 7;
        height: 100%;
        background-color: rgba(0,0,0,0.45);
    }
    .CommentsMasked-main{
        background-color: var(--bg-one-color);
        flex: 3;
        height: 100%;
        overflow-y: auto;
    }
    .CommentsMasked-header {
        padding: 20px;
        font-size: 1.2em;
        border-bottom: 1px solid var(--boder-four-color);
    }
    .CommentsMasked-body {
        padding: 20px;
        display: flex;
    }

    .CommentsMasked-write {
        background-color: var(--bg-four-color);
        border-radius: 10px;
        padding: 10px;
        margin-left: 10px;
        flex: 1;
    }

    .CommentsMasked-write .TextAreaWidget-textDiv {
        border: none;
    }

    .CommentsMasked-write textarea {
        background-color: var(--bg-four-color);
        color: rgba(0,0,0);
    }

    .CommentsMasked-write button {
        display: block;
        margin-top: 10px;
        border-radius: 20px;
        margin-left: auto;
    }
    .CommentsMasked-comments {
        padding: 0 20px;
    }
    .CommentsMasked-comments-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
    }
    .CommentsMasked-comments-item-content {
        flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }
    .CommentsMasked-comments-item-content div:first-child{
        color: var(--one-font-color);
    }
    .CommentsMasked-comments-item-content div{
        padding: 5px 0;
    }
    .CommentsMasked-write-reply {
        padding: 0.5em;
        color: var(--one-font-color);
    }
}

@media screen and (max-width: 910px) {
    .CommentsMasked-none {
        z-index: 500;
        background-color: rgba(0,0,0,0);
        position: fixed;
        right: 0;
        top: 60px;
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        display: flex;
        flex-direction: column;
    }

    .CommentsMasked-show {
        z-index: 500;
        background-color: rgba(0,0,0,0);
        position: fixed;
        right: 0;
        top: 60px;
        max-height: 100%;
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        transition: max-height 0.5s ease-in-out;
        display: flex;
        flex-direction: column;
    }

    .CommentsMasked-covers {
        flex: 2;
        height: 100%;
        background-color: rgba(0,0,0,0.45);
    }
    .CommentsMasked-main{
        background-color: var(--bg-one-color);
        flex: 8;
        height: 100%;
        overflow-y: auto;
    }
    .CommentsMasked-header {
        padding: 20px;
        font-size: 1.2em;
        border-bottom: 1px solid var(--boder-four-color);
    }
    .CommentsMasked-body {
        padding: 20px;
        display: flex;
    }

    .CommentsMasked-write {
        background-color: var(--bg-four-color);
        padding: 10px;
        margin-left: 10px;
        flex: 1;
        border-radius: 10px;
    }

    .CommentsMasked-write .TextAreaWidget-textDiv {
        border: none;
    }

    .CommentsMasked-write textarea {
        background-color: var(--bg-four-color);
        color: rgba(0,0,0);
    }

    .CommentsMasked-write button {
        display: block;
        margin-top: 10px;
        border-radius: 20px;
        margin-left: auto;
    }
    .CommentsMasked-comments {
        padding: 0 20px;
    }
    .CommentsMasked-comments-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
    }
    .CommentsMasked-comments-item-content {
        flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }
    .CommentsMasked-comments-item-content div:first-child{
        color: var(--one-font-color);
    }
    .CommentsMasked-comments-item-content div{
        padding: 5px 0;
    }
    .CommentsMasked-write-reply {
        padding: 0.5em;
        color: var(--one-font-color);
    }
}